<template>
  <div class="login">
    <div class="logo">
      <img alt="" src="@/assets/logo.jpg" />
    </div>
    <!-- 手机号 -->
    <input-group
      :btn-title="btnTitle"
      :disabled="disabled"
      :error="errors.phone"
      @btnClick="getCode"
      maxlength="11"
      placeholder="请输入手机号"
      type="num"
      v-model="phone"
    />
    <!-- 验证码 -->
    <input-group :error="errors.code"
                 maxlength="6" 
                 placeholder="请输入验证码" 
                 type="num" v-model="code" 
                
                 />
    <!-- 用户服务协议 -->
    <div class="login_des">
      <p>
        新用户登录即自动注册，表示已同意
        <span>《用户服务协议》</span>
      </p>
    </div> 
    <!-- 登录按钮 -->
    <div class="login_btn">
      <button :disabled="isClick" @click="btnLogin">登录</button>
    </div>
  </div>
</template>

<script>
import InputGroup from "@/components/InputGroup";

export default {
  name: "Login",
  components: { InputGroup },
  data() {
    return {
      phone: "",
      code: "",
      errors: {},
      btnTitle: "获取验证码",
      disabled: false
    };
  },
  computed: {
    isClick(){
      if(!this.phone || !this.code){
        return true
      }else{
        return false
      }
    }
  },
  created() {
    this.phone='17302231335'
  },
  methods: {
    // 获取验证码
    getCode(){
      /* if(this.validatePhone()){
         axios
          .post("/api/posts/sms_send", {
          //  sid:'94d7787407a2d35e7c5daa64cf1f7337',
          //  token:'c18cc57aefd3615ec3127e612b601c2d',
          //  appid:'ce7b65e0e2954c02920a179356f2297a',
          //  templateid:'537066',
          //  tpl_id:'210857',
          //  key:'1f4bfb185eca2d76fa49fdb664769deb',
            // phone: this.phone
          })
          .then(res => {
            console.log(res);

             this.validateBtn()
          })
          .catch(err => {
            console.log(err);
          }); 
    }*/
         if(this.validatePhone()){
            this.validateBtn()
            this.code='081053'
         } 
      
    },
    // 倒计时
    validateBtn(){
      
      let time=60
      let timer=setInterval(()=>{
        if(time==0){
          clearInterval(timer)
          this.btnTitle='获取验证码'
          this.disabled = false
        }else{
          this.btnTitle=time+'秒后重试'
          this.disabled = true
          time--
        }
      },1000)
      
    },
    // 验证手机号
    validatePhone(){
      if(!this.phone){
        this.errors={
          phone:'手机号码不能为空'
        }
        return false
      }else if(!/^1[3-9]\d{9}$/.test(this.phone)){
        this.errors={
          phone:'请填写真确的手机号'
        }
        return false
      }else{
        this.errors={}
        return true
      }
    },
    // 登录
    btnLogin(){
      this.errors={}
      axios.post('/api/posts/sms_back',{
        phone:this.phone,
        code:this.code
      })
      .then(res=>{
        const token=res.user._id
        localStorage.setItem('token',token)
        this.$router.push('/')
      })
      .catch(err=>{
        this.errors={
          code:err.response.data.msg
        }
      })
    },
  } 
};
</script>

<style scoped>
.login {
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 30px;
  background: #ffffff;
}

.logo {
  text-align: center;
}

.logo img {
  width: 150px;
}

.text_group,
.login_des,
.login_btn {
  margin-top: 20px;
}

.login_des {
  line-height: 22px;
  color: #aaaaaa;
}

.login_des span {
  color: #4d90fe;
}

.login_btn button {
  font-size: 15px;
  width: 100%;
  height: 40px;
  color: white;
  border: none;
  border-radius: 4px;
  outline: none;
  background-color: #48ca38;
}

.login_btn button[disabled] {
  background-color: #8bda81;
}
</style>
